<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
    <div class="container">
        <div class="header">
        <div class="logo">
            <img src="img/logo.png" alt="">
            <p>university of science and engineering</p>
        </div>
        <nav>
            <ul class="nav">
                <li><a href="" class="active">Home</a></li>
                <li><a href="#banner">Banner</a></li>
                <li><a href="#news">News</a></li>
                <li><a href="#list">List</a></li>
                <li><a href="#club">Club</a></li>
                <li><a href="#contact">Contact</a></li>
                <li class="login"><a href="">Login</a><a href="" class="login">Register</a></li>
            </ul>
        </nav>
    </div>
    </div>
</header>
<section>
    <div class="banner" id="banner">
        <div class="container">
            <div class="introduction">
                <h3>Award winning university</h3>
                <h1>AN INVESTMENT IN KNOWLEDGE PAYS THE BEST INTEREST.</h1>
                <p>Education is not just about going to school and getting a degree. It's about widening your
                    knowledge and absorbing the truth about life. Knowledge is power.</p>
                <a href="">Read Story</a>
            </div>
        </div>
        <ul>
            <li><img src="img/banner1.jpg" alt=""></li>
            <li><img src="img/banner.jpg" alt=""></li>
            <li><img src="img/2.jpg" alt=""></li>
        </ul>
    </div>
</section>

<section class="new-back" id="news">
    <div class="container">
        <div class="news">
            <div class="new-title"><h2>News</h2></div>
            <div class="new">
                <div class="new-1">
                    <div class="new-down">
                        <div class="new-img"><img src="img/new.jpg" alt=""></div>
                        <div class="new-content">
                            <h3><a href="">Black researchers shaping the future</a></h3>
                            <h4 class="date">Thursday, October 25, 2018</h4>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                                Asperiores eos et fuga incidunt ipsum necessitatibus nisi quas similique.</p>
                            <div class="more"><a href="">Read More ></a></div>
                        </div>
                    </div>
                    <div class="new-down">
                        <div class="new-img"><img src="img/2.jpg" alt=""></div>
                        <div class="new-content">
                            <h3><a href="">Black researchers shaping the future</a></h3>
                            <h4 class="date">Thursday, October 25, 2018</h4>
                            <p>Asperiores eos et fuga incidunt ipsum necessitatibus nisi quas similique?
                                Animi atque beatae error illum impedit nihil qui quos sunt unde velit.</p>
                            <div class="more"><a href="">Read More ></a></div>
                        </div>
                    </div>
                    <div class="new-down">
                        <div class="new-img"><img src="img/banner.jpg" alt=""></div>
                        <div class="new-content">
                            <h3><a href="">Black researchers shaping the future</a></h3>
                            <h4 class="date">Thursday, October 25, 2018</h4>
                            <p>Asperiores eos et fuga incidunt ipsum necessitatibus nisi quas similique?
                                Animi atque beatae error illum impedit nihil qui quos sunt unde velit.</p>
                            <div class="more"><a href="">Read More ></a></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="college-back" id="list">
    <div class="container">
        <div class="colleges">
        <div class="c-title"><h2>College List</h2></div>
        <div class="college">
            <div class="col-1">
                <div class="item">
                    <img src="img/c-1.jpg" alt="">
                    <div class="mask">
                        <h2><a href="">Social Sciences</a></h2>
                    </div>
                    <div class="content">
                        <h2>Social Sciences</h2>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores aut beatae eaque eius eligendi
                            eos exercitationem fugiat illum in, ipsam, ipsum laudantium
                            quaerat quos ratione repellat reprehenderit sequi temporibus voluptates.</p>
                    </div>
                </div>
                <div class="item">
                    <img src="img/c-2.jpg" alt="">
                    <div class="mask">
                        <h2><a href="">Economics</a></h2>
                    </div>
                    <div class="content">
                        <h2>Economics</h2>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores aut beatae eaque eius eligendi
                            eos exercitationem fugiat illum in, ipsam, ipsum laudantium
                            quaerat quos ratione repellat reprehenderit sequi temporibus voluptates.</p>
                    </div>
                </div>
            </div>
            <div class="col-2">
                <div class="item">
                    <img src="img/c-3.jpg" alt="">
                    <div class="mask">
                        <h2><a href="">Low & Politics</a></h2>
                    </div>
                    <div class="content">
                        <h2>Low & Politics</h2>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores aut beatae eaque eius eligendi
                            eos exercitationem fugiat illum in, ipsam, ipsum laudantium
                            quaerat quos ratione repellat reprehenderit sequi temporibus voluptates.</p>
                    </div>
                </div>
                <div class="item">
                    <img src="img/c-4.jpg" alt="">
                    <div class="mask">
                        <h2><a href="">Science & Technology</a></h2>
                    </div>
                    <div class="content">
                        <h2>Science & Technology</h2>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores aut beatae eaque eius eligendi
                            eos exercitationem fugiat illum in, ipsam, ipsum laudantium
                            quaerat quos ratione repellat reprehenderit sequi temporibus voluptates.</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="view"><a href="">Others</a></div>
    </div>
    </div>
</section>

<section class="club-back" id="club">
    <div class="container">
        <div class="c-title"><h2>Club Activity</h2></div>
        <div class="clubs">
            <div class="club">
                <div class="big"><img src="img/c-2.jpg" alt=""></div>
                <div class="small">
                    <img src="img/active-2.png" alt="">
                    <h3>Football</h3>
                </div>
                <p>Date: Thursday, October 25 <br> Time: 14:00</p>
                <p>Building 4, Classroom 201</p>
            </div>
            <div class="club">
                <div class="big"><img src="img/c-2.jpg" alt=""></div>
                <div class="small">
                    <img src="img/dance.png" alt="">
                    <h3>dance</h3>
                </div>
                <p>Date: Thursday, October 25 <br> Time: 14:00</p>
                <p>Building 4, Classroom 201</p>
            </div>
            <div class="club">
                <div class="big"><img src="img/c-2.jpg" alt=""></div>
                <div class="small">
                    <img src="img/print.png" alt="">
                    <h3>print</h3>
                </div>
                <p>Date: Thursday, October 25 <br> Time: 14:00</p>
                <p>Building 4, Classroom 201</p>
            </div>
            <div class="club">
                <div class="big"><img src="img/c-2.jpg" alt=""></div>
                <div class="small">
                    <img src="img/sing.png" alt="">
                    <h3>Sing</h3>
                </div>
                <p>Date: Thursday, October 25 <br> Time: 14:00</p>
                <p>Building 4, Classroom 201</p>
            </div>
            <div class="club">
                <div class="big"><img src="img/c-2.jpg" alt=""></div>
                <div class="small">
                    <img src="img/active-1.png" alt="">
                    <h3>Volunteer</h3>
                </div>
                <p>Date: Thursday, October 25 <br> Time: 14:00</p>
                <p>Building 4, Classroom 201</p>
            </div>
        </div>
    </div>
</section>

<section>
    <div class="invite">
        <div class="invite-img"><img src="img/invite.jpg" alt=""></div>
        <div class="invite-content">
            <div class="v-title"><h2>Together we create the future</h2></div>
            <div class="form">
                <form action="">
                    <input type="text" placeholder="Name"><br />
                    <input class="gender" type="text" placeholder="Gender"><br />
                    <input type="text" placeholder="Birth_date"><br />
                    <input class="tele" type="text" placeholder="Telephone"><br />
                    <a href="">Join Us</a>
                    <a href="">Cancel</a>
                </form>
            </div>
            <div class="address">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores aut beatae eaque eius eligendi
                eos exercitationem fugiat illum in, ipsam, ipsum laudantium
                quaerat quos ratione repellat reprehenderit sequi temporibus voluptates.</p>
                <p>Address: 1022 huangpu road, Shanghai</p>
            </div>
        </div>
    </div>
</section>

<section class="foot-back" id="contact">
    <div class="footer container">
        <div class="media">
            <div class="contact">
                <h3><a href="">Contact Us</a></h3>
                <p><a href="">Staring Soon</a></p>
                <p><a href="">Just Added</a></p>
                <p><a href="">Most Viewed</a></p>
                <p><a href="">Top Paid</a></p>
            </div>
            <div class="cate">
                <h3><a href="">Categories</a></h3>
                <p><a href="">Art & Design</a></p>
                <p><a href="">Business</a></p>
                <p><a href="">Computer Science</a></p>
                <p><a href="">Engineering</a></p>
            </div>
            <div class="icon">
                <img src="img/twitter.png" alt="">
                <img src="img/google.png" alt="">
                <img src="img/INS.png" alt="">
                <img src="img/FaceBook.png" alt="">
                <img src="img/wei.png" alt="">
            </div>
        </div>
        <div class="copy">
            <p>© University of science and engineering 2018</p>
        </div>
    </div>

</section>
<script src="js/jquery.js"></script>
<script src="js/main.js"></script>
</body>
</html>